<template>
  <div class="pages">
    <div class="pages-header">
      <div class="header-content">
        <div class="header-banner">
          <div class="header-title">
            <div>EV录屏</div>
            <div class="title-img"></div>
          </div>
          <div class="header-desc">
            免费无水印，集视频录制与直播功能于一身的桌面录屏软件
          </div>
          <div class="header-desc1">全球10，000，000+用户选择</div>
          <div class="exe-list">
            <a
              class="list-item"
              href="https://ctpublic.ieway.cn/public/download/EVCapture_v5.2.3.exe"
            >
              <div class="item-img img1"></div>
              <div class="item-title">Win 5.2.3 下载</div>
            </a>
            <a
              class="list-item"
              href="https://ctpublic.ieway.cn/public/download/EVCapture_v5.2.3.exe"
            >
              <div class="item-img img2"></div>
              <div class="item-title">安卓 1.8.1</div>
            </a>
            <a
              class="list-item"
              href="https://apps.apple.com/cn/app/ev%E5%BD%95%E5%B1%8F/id1602170125"
            >
              <div class="item-img img3"></div>
              <div class="item-title">iOS版 1.3.4</div>
            </a>
            <a
              class="list-item"
              href="https://ctpublic.ieway.cn/public/download/EVCapture_v4.2.4.exe"
            >
              <div class="item-img img4"></div>
              <div class="item-title">Win 5.2.3 下载</div>
            </a>
          </div>
          <img src="@/assets/banner1.png" alt="" style="width: 838px" />
        </div>

        <div class="content-title">
          <div class="title">无水印、无录制时长限制</div>
          <div class="desc">基础功能无使用限制，免费使用</div>
        </div>
        <div class="tab-type">
          <div
            class="type-item"
            v-for="(item, index) in list"
            :key="index"
            @click="tabFn(index)"
          >
            <div
              class="item-img"
              :style="{
                backgroundPosition: item.active
                  ? item.positions1
                  : item.positions,
              }"
            ></div>
            <div class="item-title">{{ item.title }}</div>
            <div class="item-line" v-if="item.active"></div>
          </div>
        </div>
        <div class="type-temp">
          <div class="temp" v-if="tempTitle == 'zhibo'">
            <img
              src="https://ctpublic.ieway.cn/public/v5/imgs/evcapture/evcapture-feature-zhibotuiliu.png"
              alt=""
            />
            <div class="temp-content">
              <div class="temp-title">
                <div>本地直播</div>
                <div>在线直播</div>
              </div>
              <div class="temp-desc">
                <div>本地直播：支持局域网内小范围同屏观看</div>
                <div>在线直播：一键推送到各大直播平台，操作简单快捷</div>
              </div>
              <div class="temp-desc">
                <div>高清画质，低延迟</div>
                <div>多种直播方式，满足不同的直播需求</div>
              </div>
            </div>
          </div>
          <div class="temp" v-if="tempTitle == 'moshi'">
            <img
              src="https://ctpublic.ieway.cn/public/v5/imgs/evcapture/evcapture-feature-duozhongmoshi.png"
              alt=""
            />
            <div class="temp-content">
              <div class="temp-title">
                <div>全屏录制</div>
                <div>选区录制</div>
                <div>窗口录制</div>
                <div>只录摄像头</div>
                <div>只录音频</div>
              </div>
              <div class="temp-desc">
                <div>免费不限时长，多种录制模式，满足不同的录制需求</div>
                <div>支持嵌入摄像头组合录制</div>
              </div>
            </div>
          </div>
          <div class="temp" v-if="tempTitle == 'yinpin'">
            <img
              src="https://ctpublic.ieway.cn/public/v5/imgs/evcapture/evcapture-feature-yinpincaiji.png"
              alt=""
            />
            <div class="temp-content">
              <div class="temp-title">
                <div>麦克风录制</div>
                <div>系统声录制</div>
              </div>
              <div class="temp-desc">
                <div>可麦克风和系统声单独录制，也可组合录制，允许录</div>
                <div>制中随时更改录制音频</div>
              </div>
            </div>
          </div>
          <div class="temp" v-if="tempTitle == 'changjing'">
            <img
              src="https://ctpublic.ieway.cn/public/v5/imgs/evcapture/evcapture-feature-changjingbianji.png"
              alt=""
            />
            <div class="temp-content">
              <div class="temp-title">
                <div>图片水印</div>
                <div>文字水印</div>
                <div>可嵌入摄像头</div>
                <div>绿幕抠图</div>
              </div>
              <div class="temp-desc">
                <div>
                  可自定义录制场景，自由添加文字水印，图片水印，嵌入摄像头，
                </div>
                <div>打造自己专属的视频标记</div>
                <div>绿幕抠图：一键去除摄像头绿幕背景，轻松抠人像</div>
                <div>
                  高级功能更支持保存水印记录，保存场景，下次录制可一键复用
                </div>
              </div>
            </div>
          </div>
          <div class="temp" v-if="tempTitle == 'dingshi'">
            <img
              src="https://ctpublic.ieway.cn/public/v5/imgs/evcapture/evcapture-feature-dingshiluzhi.png"
              alt=""
            />
            <div class="temp-content">
              <div class="temp-title">
                <div>计划录制</div>
                <div>固定时长录制</div>
              </div>
              <div class="temp-desc">
                <div>支持设定开始录制时间和录制时长，在设定的时间自动</div>
                <div>开始录制和结束录制</div>
                <div>支持设定单个视频录制时长，到达限定值自动结束录制</div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-title">
          <div class="title">更多高级功能，等你体验</div>
          <div class="desc">丰富的高级功能，满足多样化录制需求和使用场景</div>
        </div>
        <div class="card-content">
          <cardItem
            v-for="(item, index) in cardList"
            :key="index"
            :detail="item"
          ></cardItem>
        </div>

        <div class="content-title">
          <div class="title">软件特色</div>
          <div class="desc">
            轻便小巧，高清录制，资源占用更小，录屏画面更流畅
          </div>
        </div>
        <div class="desc-list">
          <describe
            v-for="(item, index) in describeList"
            :key="index"
            :detail="item"
          ></describe>
        </div>
        <div class="user-content">
          <div class="content-title">
            <div class="title">众多用户的选择</div>
            <div class="desc">已累计用户10,000,000+</div>
          </div>
          <div class="user-list">
            <!-- <div class="list-left"></div> -->
            <div class="list-content">
              <div class="img1"></div>
              <div class="img2"></div>
              <div class="img3"></div>
            </div>
            <!-- <div class="list-right"></div> -->
          </div>
        </div>
        <div class="exe-list-content">
          <div class="exe-title">EV录屏，简单易用的录屏软件</div>
          <div class="exe-list">
            <a
              class="list-item"
              href="https://ctpublic.ieway.cn/public/download/EVCapture_v5.2.3.exe"
            >
              <div class="item-img img1"></div>
              <div class="item-title">Win 5.2.3 下载</div>
            </a>
            <a
              class="list-item"
              href="https://ctpublic.ieway.cn/public/download/EVCapture_v5.2.3.exe"
            >
              <div class="item-img img2"></div>
              <div class="item-title">安卓 1.8.1</div>
            </a>
            <a
              class="list-item"
              href="https://apps.apple.com/cn/app/ev%E5%BD%95%E5%B1%8F/id1602170125"
            >
              <div class="item-img img3"></div>
              <div class="item-title">iOS版 1.3.4</div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref } from "vue";
import cardItem from "@/components/card/index";
import describe from "@/components/describe/index";
let data = reactive({
  list: [
    {
      title: "多种录制模式",
      positions: "-28px -1069px",
      positions1: "-28px -975px",
      temp: "moshi",
      active: true,
    },
    {
      title: "音频采集",
      positions: "-149px -1069px",
      positions1: "-149px -975px",
      temp: "yinpin",
    },
    {
      title: "场景编辑",
      positions: "-270px -1069px",
      positions1: "-270px -975px",
      temp: "changjing",
    },
    {
      title: "定时录制",
      positions: "-391px -1069px",
      positions1: "-391px -975px",
      temp: "dingshi",
    },
    {
      title: "直播推流",
      positions: "-512px -1069px",
      positions1: "-512px -975px",
      temp: "zhibo",
    },
  ],
  cardList: [
    {
      title: "多平台支持",
      desc: "支持添加画布背景，屏幕选区，摄像头图片、文字水印，满足多样化录制需求",
      positions: "-22px -890px",
    },
    {
      title: "桌面画板",
      desc: "在录制中使用画笔和文字等进行标注，随时画出重点",
      positions: "-140px -890px",
    },
    {
      title: "按键显示",
      desc: "开启该功能后键盘上的按键操作会实时显示在桌面上",
      positions: "-258px -890px",
    },
    {
      title: "鼠标设置",
      desc: "可自定义录制中鼠标点击效果，支持录制鼠标轨迹，增强录制视频观看体验",
      positions: "-376px -890px",
    },
    {
      title: "选区拖动",
      desc: "解锁此功能后，选区录制模式，支持录制中实时移动选区位置",
      positions: "-492px -890px",
    },
    {
      title: "声音优化",
      desc: "支持麦克风增强、音频降噪",
      positions: "-610px -890px",
    },
    {
      title: "场景保存",
      desc: "保存最新的录制场景，下次录制无需重新编辑，可快速复用场景开启录制",
      positions: "-726px -890px",
    },
    {
      title: "众多实用工具",
      desc: "有视频变速、视频修复、高清转码、制作gif、批量水印、串流存盘等功能",
      positions: "-846px -890px",
    },
  ],
  describeList: [
    {
      title: "多平台支持",
      desc1: "界面简洁易懂",
      desc2: "一键轻松开启录制",
      positions: "-156px -598px",
    },
    {
      title: "极致运行 顶级画质",
      desc1: "内存占用率低，cpu消耗小",
      desc2: "急速稳定运行，支撑顶级画质",
      positions: "-726px -304px",
    },
    {
      title: "画中画组合录制",
      desc1: "分屏录制、场景编辑",
      desc2: "多种录制模式任你选择",
      positions: "-886px -304px",
    },
    {
      title: "实时屏幕共享",
      desc1: "支持局域网内屏幕共享",
      desc2: "同步保存至本地，想看就看",
      positions: "4px -598px",
    },
  ],
});
let tempTitle = ref("moshi");
let { list, cardList, describeList } = toRefs(data);

function tabFn(key) {
  list.value.forEach((item, index) => {
    if (index === key) {
      item.active = true;
      tempTitle.value = item.temp;
    } else {
      item.active = false;
    }
  });
}
</script>

<style lang="less">
.pages {
  .pages-header {
    .header-content {
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .header-banner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        background: url(https://ctpublic.ieway.cn/public/v5/imgs/evcapture/evcapture-banner20240726.png)
          bottom no-repeat;
        background-color: #0088ef;
        background-size: cover;
        height: 830px;
        .header-title {
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 50px;
          font-weight: 900;
          .title-img {
            margin-left: 50px;
            width: 111px;
            height: 34px;
            background: url(https://ctpublic.ieway.cn/public/v5/imgs/evcapture_sprites/evcapture_sprites.png) -690px -598px;
            cursor: pointer;
          }
        }
        .header-desc {
          font-size: 30px;
          font-weight: 350;
          line-height: 50px;
          color: #fff;
          margin: 30px 0 20px;
        }
        .header-desc1 {
          font-size: 20px;
          font-weight: 350;
          line-height: 20px;
          color: #fff;
          margin-right: 40px;
        }
        .exe-list {
          display: flex;
          align-items: center;
          margin-top: 30px;
          .list-item {
            display: flex;
            align-items: center;
            width: 145px;
            height: 46px;
            border-radius: 7px;
            margin-right: 20px;
            background: none;
            border: 1px solid rgba(255, 255, 255, 0.6);
            color: #fff;
            font-size: 14px;
            .item-img {
              background-image: url(https://ctpublic.ieway.cn/public/v5/imgs/download-icon.png);
              width: 18px;
              height: 32px;
              margin-right: 15px;
            }
            .img1 {
              background-position: -7px 9px;
            }
            .img2 {
              background-position: -41px 8px;
            }
            .img3 {
              background-position: -72px 9px;
            }
            .img4 {
              background-position: -114px 8px;
            }
            .item-title {
            }
          }
          .list-item:hover {
            background: #fff;
            color: #4a90e2;
          }
        }
      }

      .content-title {
        .title {
          font-size: 28px;
          text-align: center;
          line-height: 40px;
          margin: 60px 0 16px 0;
        }
        .desc {
          font-family: MicrosoftYaHei;
          margin-bottom: 46px;
          font-size: 16px;
          color: #808080;
          text-align: center;
        }
      }
      .tab-type {
        display: flex;
        align-items: center;
        .type-item {
          width: 170px;
          margin-right: 68px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .item-img {
            width: 78px;
            height: 78px;
            margin-bottom: 12px;
            background: url(https://ctpublic.ieway.cn/public/v5/imgs/evcapture/evcapture_sprites20240726.png);
          }
          .item-title {
          }
          .item-line {
            width: 48px;
            height: 6px;
            background: linear-gradient(
              95deg,
              #ff8a2a -4%,
              #22b167 35%,
              #419cf9 67%
            );
            margin-top: 10px;
          }
        }
      }
      .type-temp {
        width: 100%;
        height: 440px;
        display: flex;
        margin-top: 20px;
        align-items: center;
        justify-content: center;
        background: url(https://ctpublic.ieway.cn/public/v6/imgs/201112addimg/evcapture-feature-banner.png);
        .temp {
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 549px;
            aspect-ratio: auto 549 / 302;
            height: 302px;
            margin-right: 100px;
          }
          .temp-content {
            .temp-title {
              width: 460px;
              flex-wrap: wrap;
              display: flex;
              align-items: center;
              font-size: 24px;
              color: #474747;
              font-weight: 600;
              div {
                width: 170px;
                height: 28px;
                margin-bottom: 20px;
              }
            }
            .temp-desc {
              font-size: 18px;
              line-height: 26px;
              margin-top: 20px;
              color: #999;
            }
          }
        }
      }
      .card-content {
        height: 100%;
        display: flex;
        align-items: center;
        width: 1180px;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .desc-list {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1180px;
        flex-wrap: wrap;
      }
      .user-content {
        margin-top: 50px;
        width: 100%;
        background: url(https://ctpublic.ieway.cn/public/v6/imgs/201112addimg/evcapture-picture-switching-background.png)
          bottom center no-repeat;
        background-size: cover;
        height: 570px;
        padding-top: 15px;
        .user-list {
          width: 1180px;
          margin: 0 auto;
          .list-left {
            width: 70px;
            height: 70px;
            background: url(https://ctpublic.ieway.cn/public/v5/imgs/evcapture_sprites/evcapture_sprites.png) -600px -598px;
            left: -70px;
            top: 100px;
            cursor: pointer;
          }
          .list-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            div {
              width: 348px;
              height: 274px;
            }
            .img1 {
              background: url(https://ctpublic.ieway.cn/public/v5/imgs/evcapture_sprites/evcapture_sprites.png) -10px -10px;
            }
            .img2 {
              background: url(https://ctpublic.ieway.cn/public/v5/imgs/evcapture_sprites/evcapture_sprites.png) -368px -10px;
            }
            .img3 {
              background: url(https://ctpublic.ieway.cn/public/v5/imgs/evcapture_sprites/evcapture_sprites.png) -10px -314px;
            }
          }
          .list-right {
          }
        }
      }
      .exe-list-content {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 305px;
        background: url(https://ctpublic.ieway.cn/public/v6/imgs/201112addimg/evcapture-xiazaibackground.png)
          bottom center no-repeat;
        .exe-title {
          margin: 64px 0 9px 0;
          line-height: 53px;
          font-family: PingFangSC-Semibold;
          font-size: 28px;
          color: #333333;
          text-align: center;
        }
        .exe-list {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 30px;
          .list-item {
            display: flex;
            align-items: center;
            width: 145px;
            height: 46px;
            border-radius: 7px;
            margin-right: 75px;
            background: none;
            border: 1px solid #4a90e2;
            color: #4a90e2;
            font-size: 14px;
            .item-img {
              background-image: url(https://ctpublic.ieway.cn/public/v5/imgs/download-icon.png);
              width: 18px;
              height: 32px;
              margin-right: 15px;
            }
            .img1 {
              background-position: -7px -12px;
            }
            .img2 {
              background-position: -41px -12px;
            }
            .img3 {
              background-position: -73px -12px;
            }

            .item-title {
            }
          }
          .list-item:hover {
            background: #fff;
            color: #4a90e2;
          }
        }
      }
    }
  }
}
</style>
